<template>
  <div class="view-container">
    <div class="compon-container">
      <StatisticLine :xAxis="lineData.xAxis" :data="lineData.data" :theme="lineDialogProps.theme"></StatisticLine>
    </div>
  </div>
</template>

<script setup lang="ts">
import { $t } from "@/plugins/i18n";
import StatisticLine from '@/components/StatisticLine/index.vue'
import { onMounted, reactive, ref, watch } from 'vue';
import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
import { apiTrainStat} from '@/api/chart'
const { layoutTheme } = useDataThemeChange();
defineOptions({
  name: "Welcome"
});
const lineData = ref({
  data: [],
  xAxis: []
})
const lineDialogProps = reactive({
  visible: false,
  title: '详细查询',
  width: '1200',
  modal: true,
  appendToBody: true,
  theme: 'light',
  destroyOnClose: true
})
const initLine = async (params: any) => {
  let data = await apiTrainStat()
  let xAxis = data.iterations
  let yAxiss = [{title:"F2_Score",data:data.f2_score},{title:"Accuracy",data:data.accuracy},{title:"Losses",data:data.losses},{title:"Precision",data:data.precision}]
  const { data: chartData } = {
    data: {
      xAxis: xAxis,
      data: [
        ...yAxiss
      ],
    }
  }
  lineData.value.data = chartData.data
  lineData.value.xAxis = chartData.xAxis   
  console.log(lineData.value)
}

const toDetail = () => {
  lineDialogProps.visible = true
}

watch(layoutTheme, (newVal, oldVal) => {
  if (oldVal.overallStyle !== newVal.overallStyle) {
    lineDialogProps.theme = layoutTheme.value.overallStyle
    console.log(lineDialogProps.theme)
  }
}, {immediate: false, deep: true})

onMounted(async () => {
  await initLine({ stat_type: 1 })
})
</script>
<style lang="scss" scoped>
.compon-container{
  background-color: white;
  box-shadow: 0px 0px 12px rgba(0,0,0,0.12);
  margin-bottom: 10px;
  border-radius: 4px;
}
.view-container{
  width: 96%;
  height: 100%;
}
</style>

